<template>
  <!--  面包屑导航-->
  <div class="break">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>出境管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>证件借还</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <el-form-item style="margin-left: 540px;margin-top: 10px">
    <el-button style="background-color: pink" @click="dialogAddState=true">添加</el-button>
  </el-form-item>
  <div style="margin:20px">
    <el-table :data="blogInfo" stripe border style="width: 100%"
    >
      <el-table-column prop="pickuptime" label="领取时间" />
      <el-table-column prop="pickuppeople" label="领取人"  />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="estimated_return_date" label="预计交回日期" />
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3,5]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 添加模态框 -->
  <el-dialog v-model="dialogAddState" title="添加证件" width="680">
    <div>
      <el-form ref="formAddRef" :model="formAdd" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="pickuppeople" label="领取人">
              <el-input v-model="formAdd.pickuppeople"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="remark" label="备注">
              <el-input v-model="formAdd.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="estimated_return_date" label="预计交回日期">
              <el-date-picker
                  v-model="formAdd.estimated_return_date"
                  type="date"
                  placeholder="选择日期"
                  @change="formatDate"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnReset">取消</el-button>
        <el-button type="primary" @click="submitRegisterForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {Unlock,Lock,Delete,Edit} from "@element-plus/icons";
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/people";
import {ElMessage, ElMessageBox} from "element-plus";
const  mallInfo=ref([])
onMounted(()=>{
  getBrcards();
})


// 表格显示内容
const getBrcards = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含ID参数
  };
  request({
    url: '/brcards/canAll',
    method: 'get',
    params,
  }).then((req) => {
    console.log(req)
    if (200 == req.data.errorCode) {
      blogInfo.value = req.data.data.records.map(item => ({
        ...item,
      }));
      totals.value = req.data.data.total;
    }
  })
}
const searchOnSubmit=()=>{
  getBrcards()
}
//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const  blogInfo=ref([])
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value=val;
  getBrcards()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value=val;
  getBrcards()
}

///////////////////添加/////////////////////////
const dialogAddState = ref(false);
const formAddData = {
  pickuptime:'',
  pickuppeople:'',
  remark:'',
  estimated_return_date:'',
};
const validateChineseName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入姓名'));
  }
  // 正则表达式，匹配只包含汉字的字符串
  const regex = /^[\u4e00-\u9fa5]+$/;
  if (!regex.test(value)) {
    return callback(new Error('姓名只能输入汉字'));
  }
  callback();
};
const rules = reactive({
  pickuppeople: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
    {validator: validateChineseName, trigger: 'blur'}
  ],
  remark: [
    {required: true, message: '请输入备注', trigger: 'blur'}
  ],
  estimated_return_date: [
    {required: true, message: '请输入交回日期', trigger: 'blur'}
  ]
})
const formAdd = reactive({...formAddData});
const addressFormRef = ref(null); // 创建一个ref引用form
// 提交表单
const submitRegisterForm = ()=>{
  request({
    method:'post',
    url:'/brcards/add',
    params:formAdd
  }).then(req=>{
    ElMessage({
      type:'info',
      message:req.data.msg
    })
    if (200 == req.data.errorCode){
      Object.assign(formAdd,formAddData)
      getBrcards()
    }
  })
  dialogAddState.value=false;
}
const dialogAddOnReset = () => {
  Object.assign(formAdd , formAddData)
  dialogAddState.value = false
}
const formatDate=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formAdd.estimated_return_date = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  // 组合成所需的格式
  formAdd.estimated_return_date = `${year}-${month}-${day}`;
}
</script>

<style scoped>
.page{
  margin-left: 40%;
}
.el-breadcrumb{
  font-size: 18px;
}
.break{
  margin: 5px 0 0 10px;
}
</style>